{% extends "base.html" %}

{% block subtitle %}
  Dashboard
{% endblock subtitle %}

{% block navbar_breadcrumb %}
  <ul class="nav navbar-nav oppia-navbar-breadcrumb" ng-controller="DashboardNavbarBreadcrumb">
    <li>
      <span class="oppia-navbar-breadcrumb-separator"></span>
      Dashboard
      <span class="oppia-navbar-breadcrumb-separator" style="margin-left: 5px;"></span>
      <span>
        <[activeTabNames[activeTab]]>
      </span>
    </li>
  </ul>
{% endblock navbar_breadcrumb %}

{% block local_top_nav_options %}
  <ul class="nav navbar-nav oppia-navbar-nav navbar-right" ng-controller="DashboardLocalNav"
      style="margin-left: 35px; margin-right: 0px;">
    <li ng-class="{'active': activeTab === 'timeline'}">
      <a href="" title="Timeline" ng-click="setActiveTab('timeline')">
        <span class="glyphicon glyphicon-time" style="transform: rotate(-90deg);"></span>
      </a>
    </li>
    <li ng-class="{'active': activeTab === 'myExplorations'}">
      <a href="" title="My Explorations" ng-click="setActiveTab('myExplorations')">
        <span class="glyphicon glyphicon-th-list"></span>
      </a>
    </li>
  </ul>

  <ul class="nav navbar-nav oppia-navbar-nav navbar-right ng-cloak" ng-controller="CreateExplorationButton">
    <li>
      <div class="oppia-navbar-button-container">
        <a class="btn oppia-navbar-add-exploration-button protractor-test-create-exploration"
           ng-click="showCreateExplorationModal()" style="margin-right: 0;">
          <span class="oppia-navbar-add-exploration-button-plus">+</span>
          <span>Create Exploration</span>
        </a>
      </div>
    </li>
  </ul>
{% endblock local_top_nav_options %}

{% block content %}
  <div class="container" ng-controller="Dashboard" style="margin-top: 15px;">
    <div ng-if="activeTab === 'timeline'">
      <h2>Timeline</h2>
      <div ng-if="jobQueuedMsec">
        <span class="pull-right" style="opacity: 0.7; font-size: smaller;">
          Last updated: <[getLocaleAbbreviatedDatetimeString(jobQueuedMsec)]>
        </span>
        <!-- This seems to be needed because otherwise, in Firefox, the 'last updated' string gets merged into the table of recent updates. -->
        <br>
      </div>

      <div ng-if="recentUpdates.length === 0">
        <em>No recent updates.</em>
      </div>

      <div ng-if="recentUpdates.length > 0">
        <table class="table">
          <tr>
            <th></th>
            <th></th>
            <th>Exploration</th>
            <th>Last updated</th>
            <th>by</th>
            <th>Subject</th>
          </tr>
          <tr ng-repeat="update in recentUpdates"
              ng-class="{'oppia-dashboard-row-recent': lastSeenMsec && lastSeenMsec < update.last_updated_ms && update.author_username !== currentUsername, 'oppia-dashboard-row': !lastSeenMsec || lastSeenMsec >= update.last_updated_ms || update.author_username === currentUsername}"
              ng-click="navigateToItem(update.activity_id, update.type)">
            <td>
              <span class="label label-primary"
                    ng-if="lastSeenMsec && lastSeenMsec < update.last_updated_ms && update.author_username !== currentUsername">
                New
              </span>
            </td>
            <td>
              <span ng-if="update.type === 'exploration_commit'"
                    class="glyphicon glyphicon-flag"
                    title="Exploration commit"></span>
              <span ng-if="update.type === 'feedback_thread'"
                    class="glyphicon glyphicon-comment"
                    title="Feedback thread"></span>
            </td>
            <td><[update.activity_title]></td>
            <td><[getLocaleAbbreviatedDatetimeString(update.last_updated_ms)]></td>
            <td><[update.author_username]></td>
            <td><[update.subject]></td>
          </tr>
        </table>
      </div>
    </div>

    <div ng-if="activeTab === 'myExplorations'">
      <h2>My Explorations</h2>

      <div ng-if="!isEmpty(privateExplorationIds)">
        <h4>Private explorations</h4>
          <ul>
            <li ng-repeat="expId in privateExplorationIds">
              <a ng-href="/create/<[expId]>"><[explorations[expId].title]></a>
            </li>
          </ul>
        </h4>
      </div>

      <div ng-if="!isEmpty(publicExplorationIds)">
        <hr>
        <h4>Public explorations</h4>
        <ul>
          <li ng-repeat="expId in publicExplorationIds">
            <a ng-href="/create/<[expId]>"><[explorations[expId].title]></a>
          </li>
        </ul>
      </div>

      <div ng-if="!isEmpty(featuredExplorationIds)">
        <hr>
        <h4>Featured explorations</h4>
        <ul>
          <li ng-repeat="expId in featuredExplorationIds">
            <a ng-href="/create/<[expId]>"><[explorations[expId].title]></a>
          </li>
        </ul>
      </div>

      <div ng-if="isEmpty(privateExplorationIds) && isEmpty(publicExplorationIds) && isEmpty(featuredExplorationIds)">
        <p>
          <em>You currently aren't managing or collaborating on any explorations.</em>
        </p>
      </div>
    </div>
  </div>

  {% include 'components/exploration_creation_button.html' %}
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('components/explorationCreationButton.js') }}
    {{ include_js_file('/dashboard/Dashboard.js') }}
  </script>
{% endblock footer_js %}
